<template>
  <div>
    测试
    <slide-verify :l="42"
                  :r="10"
                  :w="310"
                  :h="155"
                  :imgs="bgImages"
                  slider-text="向右滑动"
                  @success="onSuccess"
                  @fail="onFail"
                  @refresh="onRefresh"
    ></slide-verify>
    <div>{{ msg }}</div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      msg: '',
      bgImages: [
        'https://images.unsplash.com/photo-1502485019198-a625bd53ceb7?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=150&ixid=MnwxfDB8MXxyYW5kb218MHx8Ym9vayxsaWJyYXJ5fHx8fHx8MTY5NzQ0MTYzMg&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=300',
        'https://images.unsplash.com/photo-1521946176240-a57a33e2b449?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=150&ixid=MnwxfDB8MXxyYW5kb218MHx8Ym9vayxsaWJyYXJ5fHx8fHx8MTY5NzQ0MTY3OQ&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=300',
        'https://images.unsplash.com/photo-1535905496755-26ae35d0ae54?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=150&ixid=MnwxfDB8MXxyYW5kb218MHx8Ym9vayxsaWJyYXJ5fHx8fHx8MTY5NzQ0MTcyMg&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=300',
        'https://images.unsplash.com/photo-1564316912292-de44e84f8fc5?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=150&ixid=MnwxfDB8MXxyYW5kb218MHx8Ym9vayxsaWJyYXJ5fHx8fHx8MTY5NzQ0MTc2MQ&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=300',
        'https://images.unsplash.com/photo-1535905313417-483b22cb9d03?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=150&ixid=MnwxfDB8MXxyYW5kb218MHx8Ym9vayxsaWJyYXJ5fHx8fHx8MTY5NzQ0MTc4OQ&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=300',
      ]
    }
  },
  methods: {
    onSuccess() {
      this.msg = 'login success'
    },
    onFail() {
      this.msg = ''
    },
    onRefresh() {
      this.msg = ''
    }
  }
}
</script>

<style scoped>

</style>
